import './ShopDecorationHeader.less'
import { Button, Popconfirm, App } from 'antd'
import { useEffect, useState } from 'react'
import CardTab from '@/components/CardTab'
import { useModel } from '@umijs/max'

const ShopDecorationHeader = ({ handleSubmit }) => {
  const { GetChannels } = useModel('Global')
  const { setCurrentTab } = useModel('ShopDecoration')

  const [tabList, setTabList] = useState([])

  // tab点击事件
  const handleTabClick = ({ label, name }) => {
    setCurrentTab({ label, name })
  }

  useEffect(() => {
    getChannelsList()
  }, [])

  // 获取渠道列表
  const getChannelsList = async () => {
    const res = await GetChannels()
    if (res) {
      setTabList(res)
    }
  }

  return (
    <div className='header'>
      <div className='header_left'>
        <div className='header_left_title'>编辑店铺</div>
        <div className='header_left_subtitle'>|</div>
        <div className='header_left_subtitle'>店铺编辑器</div>
      </div>
      <div className='header_center'>
        <div className='header_center_title'>切换端口</div>
        <div className='header_center_content'>
          {tabList && tabList.length > 0 && <CardTab tabClick={handleTabClick} tabList={tabList} />}
        </div>
      </div>
      <div className='header_right'>
        <Popconfirm title='确认发布吗?' onConfirm={handleSubmit} okText='确认' cancelText='取消'>
          <Button type='primary'>立即发布</Button>
        </Popconfirm>
      </div>
    </div>
  )
}

export default ShopDecorationHeader
